import React, { useState,useEffect,useContext } from 'react'
import Header from '../../components/Header/Header'
// import ToSearch from '../../components/ToSearch/ToSearch'
import { reqgetgoodsinfo,reqcartadd } from '../../http/api'
import { Tabs, Button ,Toast} from 'antd-mobile'
import { $pre } from '../../http/http'
import { MyContext } from "../../App";

import "./Detail.less"
const Detail = (props)=>{
  const [info,setInfo] = useState([]
  )
  const [list,setList] = useState(
    ["商品", "评价", "详情", "推荐"]
  )

  const{
    state:{
      userInfo:{uid}
    },
  }=useContext(MyContext);


  //请数据
  useEffect(()=>{  
    reqgetgoodsinfo({id:props.match.params.id}).then((res)=>{
      setInfo(res.data.list[0])
    })
  },[]);
  //加入购物车
  const addShop = ()=>{
    reqcartadd({
      uid,
      goodsid:props.match.params.id,
      num:1,
      type:props.match.params.type
    }).then((res)=>{
      if(res.data.code===200){
        Toast.show({
          icon: 'success',
          content: '添加成功',
        }) 
}

    })
   
}


    return (
      <div className='detail'>
        {/* <div>info:{JSON.stringify(info)}</div> */}
        <Header back title="详情页"></Header>
        {/* <ToSearch></ToSearch> */}
        {/* tab切换栏 */}
        <Tabs>
          {list.map((item, index) => {
            return <Tabs.Tab title={item} key={index}></Tabs.Tab>
          })}
          
        </Tabs>
        {/* 商品图 */}
        <div className='detail_img'>
          <img src={$pre + info.img} alt="" />
        </div>

        <div className='detail_info'>
          <div className='detail_info_price'>
            <span>现价：￥{info.price}</span> &nbsp;&nbsp;
            <del>原价：￥{info.market_price}</del>
          </div>
          <h3>{info.goodsname}</h3>
          <h3>{info.description}</h3>
        </div>

        <div className='detail_footer'>
          <Button color='warning'>客服</Button>
          <Button color='primary'
           onClick={() => { props.history.push("/index/home") }}
          >店铺</Button>
          <Button color='success'
            onClick={() => { props.history.push("/shop") }}
          >购物车</Button>
          <Button color='warning'
            onClick={() =>  addShop() }
          >加入购物车</Button>
          <Button color='danger'>立即购买</Button>
        </div>
      </div>
    )
        };

export default Detail;